<template>
<el-dialog title="新增员工" :visible="isShowDialog" @close="handleCancel">
    <el-form
        ref="addEmp"
        class="addEmp"
        :model="formData"
        label-width="100px"
        :rules="formrules"
    >

        <el-form-item prop="username" label="姓名">
            <el-input v-model="formData.username" style="width: 80%;"></el-input>
        </el-form-item>

        <el-form-item prop="mobile" label="手机">
            <el-input v-model="formData.mobile" style="width: 80%;"></el-input>
        </el-form-item>

        <el-form-item prop="timeOfEntry" label="入职时间">
            <el-date-picker
                v-model="formData.timeOfEntry"
                style="width: 80%;"
                format="yyyy 年 MM 月 dd 日"
                placeholder="选择日期"
            >
            </el-date-picker>
        </el-form-item>

        <el-form-item label="聘用形式" prop="formOfEmployment">
            <el-select v-model="formData.formOfEmployment" style="width:80%" placeholder="请选择">
                <el-option
                    v-for="item in hireType"
                    :key="item.id"
                    :label="item.value"
                    :value="Number(item.id)"
                >
                </el-option>
                </select>
            </el-select></el-form-item>

        <el-form-item label="工号" prop="workNumber">
            <el-input v-model="formData.workNumber" style="width:80%" placeholder="请输入工号" />
        </el-form-item>

        <el-form-item label="部门" prop="departmentName">
            <el-input
                v-model="formData.departmentName"
                class="departmentName"
                style="width:80%"
                placeholder="请选择部门"
                readonly
                @focus="getDepartmentsList"
                @blur="treeBlur"
            />
            <!-- tree组件 -->
            <transition name="fade">
                <el-tree
                    v-if="isShowTree"
                    v-loading="isLoading"
                    animation="fade"
                    :data="departs"
                    :props="defaultProps"
                    style="width: 80%;"
                    default-expand-all
                    @node-click="NodeClick"
                />
            </transition>

        </el-form-item>

        <el-form-item label="转正时间" prop="correctionTime">
            <el-date-picker v-model="formData.correctionTime" style="width:80%" placeholder="请选择转正时间" />
        </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
        <!-- 列被分为24 -->
        <el-col style="display: flex; justify-content: center;">
            <el-button
                style="width:15%"
                type="primary"
                size="small"
                @click="handleSubmit"
            >确定</el-button>
            <el-button style="width:15%" size="small" @click="handleCancel">取消</el-button>
        </el-col>
    </el-row>
</el-dialog>
</template>

<script>
import { getDepartments } from '@/api/departments.js'
import { addEmployee } from '@/api/employees.js'
import tranListToTreeData from '@/utils/ListToTree.js'
import employeeNum from '@/api/constant/employees.js'
export default {
	props: {
		isShowDialog: {
			type: Boolean,
			required: true
		}
	},
	data() {
		return {
			isLoading: true,
			/* 聘用形式数组 */
			hireType: employeeNum.hireType,
			/* 部门数据 */
			departs: [],
			/* 默认tree配置 */
			defaultProps: {
				label: 'name'
			},
			/* tree显示 */
			isShowTree: false,
			formData: {
				username: '',
				mobile: '',
				formOfEmployment: null,
				workNumber: '',
				departmentName: '',
				timeOfEntry: '',
				correctionTime: ''
			},
			/* 校验规则 */
			formrules: {
				username: [
					{ required: true, message: '用户姓名不能为空', trigger: 'blur' },
					{ min: 1, max: 4, message: '用户姓名为1-4位' }
				],
				mobile: [
					{ required: true, message: '手机号不能为空', trigger: 'blur' },
					{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
				],
				formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'blur' }],
				workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
				departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
				timeOfEntry: [{ required: true, message: '入职时间', trigger: 'blur' }]
			}

		}
	},
	methods: {
		/* 取消 */
		handleCancel() {
			this.$emit('update:isShowDialog', false)
			this.$refs.addEmp.resetFields()
		},
		/* 确认 */
		handleSubmit() {
			this.$refs.addEmp.validate(async(isOk) => {
				if (isOk) {
					await addEmployee(this.formData)
					this.$message.success('添加角色完成！')
					this.$emit('update:isShowDialog', false)
					this.$parent.getEmployeeList(this.$parent.pageParams)
				}
			})
		},
		/* 获取部门数据 */
		async getDepartmentsList() {
			this.isShowTree = true
			this.isLoading = true
			const res = await getDepartments()
			this.departs = tranListToTreeData(res.depts, '')
			this.isLoading = false
			console.log(this.departs)
		},
		/* 选择部门 */
		NodeClick(data) {
			this.formData.departmentName = data.name
			this.Blur = true
		},
		/* 失去焦点事件 */
		treeBlur() {
			setTimeout(() => {
				this.isShowTree = false
			}, 150)
		}
	}
}
</script>

<style lang="scss" scoped>
	.addEmp{
		::v-deep.el-form-item__label{
			font-size: 16px;
		}
		.el-tree{
			padding: 10px 0;
			background-color: #ebebeb;
			border-radius: 10px;
			color: #4a4a4a;
			font-weight: bold;
			margin-top: 10px;

		}
	}
</style>
